<template>
  <div class="commen-container">
    <div>
      <el-button type="danger" size="normal" icon="el-icon-delete-solid" @click="handleBatchDelete">
        批量删除
      </el-button>
      <el-button type="success" size="normal" icon="el-icon-circle-plus" @click="handleAdd">
        新增功能
      </el-button>
    </div>

    <div v-if="!tableData || tableData.length < 1" class="juzhong">
      <span><i class="el-icon-loading"></i>加载中</span>
      <el-divider></el-divider>
    </div>

    <div v-else class="function-table">
      <el-table
        ref="tableData"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border>

        <el-table-column
          type="selection"
          width="80"
          align="center"
          header-align="center">
        </el-table-column>

        <el-table-column
          prop="function_id"
          label="功能ID"
          min-width="80"
          align="center"
          header-align="center">
        </el-table-column>

        <el-table-column
          prop="title"
          label="功能名称"
          min-width="120"
          align="center"
          header-align="center">
        </el-table-column>

        <el-table-column
          label="功能封面"
          min-width="120"
          align="center"
          header-align="center">
          <template slot-scope="scope">
            <el-image fit="cover"
                      :src="scope.row.icon"
                      alt="加载失败"
                      style="width: 70px; height: 70px">
              <div slot="error" class="image-slot">
                <img src="@/assets/alt3.jpg" style="
                                          height: 100%;
                                          width: 100%;
                                          object-fit: cover;"/>
              </div>
            </el-image>

          </template>
        </el-table-column>

        <el-table-column
          prop="description"
          label="功能描述"
          min-width="200"
          align="center"
          header-align="center">
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          header-align="center"
          min-width="150">
          <template slot-scope="scope">
            <div class="juzhong" style="flex-direction: row">
              <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="confirmDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-divider></el-divider>

    <!-- 新增功能弹窗 -->
    <el-dialog
      title="新增功能"
      :visible.sync="addDialogVisible"
      width="500px">
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="功能名称">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="功能封面">
          <el-input v-model="addForm.cover"></el-input>
        </el-form-item>
        <el-form-item label="功能描述">
          <el-input v-model="addForm.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddSubmit">确定</el-button>
      </div>
    </el-dialog>

    <!-- 修改功能弹窗 -->
    <el-dialog
      title="修改功能"
      :visible.sync="editDialogVisible"
      width="500px">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="功能ID">
          <el-input v-model="editForm.function_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="功能名称">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="功能封面">
          <el-input v-model="editForm.cover"></el-input>
        </el-form-item>
        <el-form-item label="功能描述">
          <el-input v-model="editForm.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEditSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {Message, MessageBox} from "element-ui";
import {getFunction, addorupdateFunction, deleteFunction} from "@/api/home/intro";

export default {
  data() {
    return {
      tableData: [],
      addDialogVisible: false,
      editDialogVisible: false,
      addForm: {
        title: '',
        cover: '',
        description: ''
      },
      editForm: {
        function_id: null,
        title: '',
        cover: '',
        description: ''
      }
    };
  },
  methods: {
    async fetchTable() {
      try {
        const rep = await getFunction();
        this.tableData = rep.map(tool => ({
          ...tool,
          icon: require('@/assets/picture/' + (tool.cover ? tool.cover + '.png' : 'default-icon.png'))
        }));
      } catch (e) {
        console.log(e);
        Message.warning("查询无效！");
      }
    },
    handleAdd() {
      this.addDialogVisible = true;
      this.addForm = {
        title: '',
        cover: '',
        description: ''
      };
    },
    async handleAddSubmit() {
      try {
        await addorupdateFunction(this.addForm);
        Message.success('新增功能成功');
        this.addDialogVisible = false;
        await this.fetchTable();
      } catch (e) {
        console.log(e);
        Message.warning('新增功能失败');
      }
    },
    handleEdit(row) {
      this.editDialogVisible = true;
      this.editForm = {
        function_id: row.function_id,
        title: row.title,
        cover: row.cover,
        description: row.description
      };
    },
    async handleEditSubmit() {
      try {
        await addorupdateFunction(this.editForm);
        Message.success('修改功能成功');
        this.editDialogVisible = false;
        await this.fetchTable();
      } catch (e) {
        console.log(e);
        Message.warning('修改功能失败');
      }
    },
    async confirmDelete(row) {
      MessageBox.confirm('确定要删除该功能吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.handleDelete(row);
      }).then(() => {
        Message.success('删除功能成功');
        this.fetchTable();
      }).catch(() => {
        Message.info('已取消删除');
      });
    },
    async handleDelete(row) {
      try {
        await deleteFunction(row.function_id);
      } catch (e) {
        console.log(e);
        Message.warning('删除功能失败');
      }
    },
    async handleBatchDelete() {
      const selection = this.$refs.tableData.selection;
      if (selection.length === 0) {
        Message.warning('请选择要删除的功能');
        return;
      }
      MessageBox.confirm('确定要批量删除选中的功能吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = selection.map(row => row.function_id);
        return this.batchDelete(ids);
      }).then(() => {
        Message.success('批量删除功能成功');
        this.fetchTable();
      }).catch(() => {
        Message.info('已取消批量删除');
      });
    },
    async batchDelete(ids) {
      try {
        await deleteFunction(ids);
      } catch (e) {
        console.log(e);
        Message.warning('批量删除功能失败');
      }
    }
  },
  mounted() {
    this.fetchTable();
  }
};
</script>

<style scoped>
.function-table {
  margin-top: 20px;
}

.juzhong {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
